<template>
  <div class="protect">
    <div class="top_tabs">
      <div class="caseBtn">
        <Button type="primary" style="margin-right: 10px" @click="caseOpenBtn">案场开启状态</Button>
        <Button type="primary" @click="optBtn" v-if="unlocking('0204100400')">操作记录</Button>
      </div>
      <Tabs v-model="tabVal" type="card" @on-click="tabClick">
        <TabPane label="案前" name="1"></TabPane>
        <TabPane label="案中" name="2"></TabPane>
        <TabPane label="尾盘" name="3"></TabPane>
        <TabPane label="停售" name="4"></TabPane>
        <TabPane label="撤场" name="5"></TabPane>
        <TabPane label="结案" name="6"></TabPane>
      </Tabs>
      <div class="btn_box">
        <Button type="primary" @click="add" v-if="unlocking('0204100100')">新增</Button>
      </div>
      <dt-grid ref="table" :onFetch="onFetch" />

      <!-- 新增，编辑弹窗 -->
      <editModal ref="modal" @getAgain="onSuccess" />

      <!-- 操作记录 -->
      <data-record ref="operationRecord"></data-record>

      <case-open-list ref="caseOpenList"></case-open-list>
    </div>
  </div>
</template>

<script>
  import column from './opt/columns'
  import editModal from './components/editModal.vue'
  import protectOption from '@/biz/protectOption/protectOption'

  import caseOpenList from './components/caseOpenList.vue'
  export default {
    name: 'DtManagementIndex',

    components: {
      editModal,
      caseOpenList
    },

    watch: {
      tabVal(val) {
        switch (val) {
          case '1':
            this.tabText = '案前'
            return
          case '2':
            this.tabText = '案中'
            return
          case '3':
            this.tabText = '尾盘'
            return
          case '4':
            this.tabText = '停售'
            return
          case '5':
            this.tabText = '撤场'
            return
          case '6':
            this.tabText = '结案'
            return
        }
      }
    },

    data() {
      return {
        tabVal: '1',
        tabText: '案前'
      }
    },

    mounted() {
      this.$refs.table.init(this, new column(this))
      this.$refs.table.fetch()
    },

    methods: {
      caseOpenBtn() {
        this.$refs.caseOpenList.show()
      },
      // 点击tab
      tabClick(val) {
        this.$refs.table.fetch()
      },
      onFetch() {
        return protectOption.protectList({ status: Number(this.tabVal) }).then((res) => {
          return res
        })
      },
      add() {
        let modalProp = {
          title: '新增',
          tabText: this.tabText,
          tabVal: this.tabVal
        }
        this.$refs.modal.show(modalProp)
      },
      edit(val) {
        console.log(val, 'bianji')
        let numIds = []
        if (val.orgIds.indexOf(',') > -1) {
          numIds = val.orgIds.split(',').map((item) => Number(item))
        } else {
          numIds.push(Number(val.orgIds))
        }
        console.log(numIds)
        let obj2 = {
          companyId: numIds,
          protectDate: val.configStatus === 1 ? true : false,
          days: val.configStatus === 1 ? val.configDays : null,
          case: val.synchronizeStatus,
          id: val.id,
          configType: val.configType
        }
        let obj1 = {
          title: '编辑',
          tabText: this.tabText,
          tabVal: this.tabVal,
          companyId: val.orgIds
        }
        this.$refs.modal.show(obj1, obj2)
      },
      delete(val) {
        this.$Modal.confirm({
          title: '确认删除该数据？',
          okText: '确定',
          cancelText: '取消',
          onOk: () => {
            protectOption.delOrgProtect({ id: val.id }).then((res) => {
              this.$Message.success('删除成功')
              this.$refs.table.fetch()
              console.log('确定删除')
            })
          }
        })
      },
      onSuccess() {
        this.$refs.table.fetch()
      },
      optBtn() {
        this.$refs.operationRecord.show('protect')
      }
    }
  }
</script>

<style lang="scss" scoped>
  .protect {
    padding: 16px;
  }
  .top_tabs {
    position: relative;
    .caseBtn {
      z-index: 10;
      position: absolute;
      top: 0;
      right: 0;
    }
  }
  .btn_box {
    text-align: right;
    padding-right: 24px;
  }
</style>
